<template>
  <a-card
    :bordered="bordered"
    :headerStyle="{
      padding: '0 0 16px 0',
      borderBottom: 0,
      height: 'auto',
      ...headerStyle,
    }"
    :bodyStyle="{
      padding: showContent ? '0' : '0',
    }"
    v-bind="$attrs"
  >
    <div class="card-content" v-show="showContent">
      <slot></slot>
    </div>
    <template #title>
      <div class="font-medium card-title">
        <slot name="title">
          {{ title }}
        </slot>
        <span class="flex items-center page-form-item-tooltip" v-if="labelTooltipContent">
          <a-tooltip :content="labelTooltipContent">
            <!-- <icon-info-circle-fill style="font-size: 16px; color: #165dffff" /> -->
            <icon-exclamation-circle style="font-size: 16px; color: #165dffff" />
          </a-tooltip>
        </span>
      </div>
    </template>
    <template #extra>
      <slot name="extra">
        <template v-if="toggle">
          <a-link @click="toggleClickFn">
            {{ toggleStatus ? '收起' : '展开' }}
            <component style="margin-left: 8px" :is="`icon-${toggleStatus ? 'up' : 'down'}`" />
          </a-link>
        </template>
      </slot>
    </template>
  </a-card>
  <a-divider class="custom-divider" v-if="showDivider" :style="{ margin: dividerMargin }" />
</template>

<script setup>
  import { ref, computed } from 'vue'
  const props = defineProps({
    title: String,
    bordered: {
      type: Boolean,
      default: false,
    },
    toggle: {
      type: Boolean,
      default: false,
    },
    toggleDefault: {
      type: Boolean,
      default: true,
    },
    showDivider: {
      type: Boolean,
      default: true,
    },
    labelTooltipContent: {
      type: String,
    },
    headerStyle: Object,
    bodyStyle: Object,
    dividerMargin: String,
  })
  const toggleStatus = ref(props.toggleDefault)
  // 是否显示 content
  const showContent = computed(() => {
    return !props.toggle || toggleStatus.value
  })
  const toggleClickFn = () => {
    toggleStatus.value = !toggleStatus.value
  }
</script>

<style lang="less" scoped>
  .card-title {
    color: #1d2129;
    position: relative;
    display: inline-block;
    font-weight: 600;
  }
  .page-form-item-tooltip {
    right: -20px;
    top: 5px;
    position: absolute;
  }
  .custom-divider {
    margin: 20px 0;
  }
</style>
